<template>
  <el-card shadow="always" class="container">
    <el-form
      :model="form"
      status-icon
      :rules="rules"
      ref="form"
      label-width="70px"
      class="login-container"
      label-position="left"
    >
      <!-- 登录上侧表单 -->
      <h3 class="login-title">系统登录</h3>
      <el-form-item label="账号" prop="account">
        <el-input
          v-model="form.account"
          autocomplete="off"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="form.password"
          placeholder="请输入密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="身份">
        <el-radio-group v-model="form.role">
          <el-radio label="student">学员</el-radio>
          <el-radio label="teacher">教员</el-radio>
          <el-radio label="admin">管理员</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 登录下侧按钮 -->
      <el-form-item class="btns" body-style="margin:0" label-width="0">
        <el-button style="margin-left: 74px" @click="register">注册</el-button>
        <el-button type="primary" @click="login">登录</el-button>
        <span @click="handleForgotPass" class="forgot-pass"
          >&nbsp;&nbsp;忘记密码</span
        >
      </el-form-item>
    </el-form>
    <el-dialog
      title="忘记密码"
      :visible.sync="forgotPassModalDialogVisible"
      width="30%"
    >
      <!-- <span>这是一段信息</span> -->
      <!-- here for forgot pass -->
      <div class="forgot-pass-box" v-if="!isSecretPass">
        <el-form
          ref="form"
          :model="form"
          label-width="80px"
          label-position="top"
        >
          <el-form-item label="账户">
            <el-input v-model="form.account" disabled></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-input v-model="form.role" disabled></el-input>
          </el-form-item>
          <el-form-item :label="`密保问题：${secretQuestion}`">
            <el-input v-model="secretAnswer"></el-input>
          </el-form-item>
        </el-form>

        <!-- 密保问题 -->
      </div>
      <div v-else class="reset-pwd">
        <el-input
          v-model="password"
          placeholder="输入新的密码"
          show-password
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="forgotPassModalDialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="handleClick">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  alterPasswordBySecretQuestion,
  submitSecretAnswer,
} from "@/services/user";
import { login } from "@/services/auth";
export default {
  name: "Login",
  data() {
    return {
      form: {},
      rules: {
        username: [
          { require: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            message: "用户名称长度不能小于3",
            trigger: "blur",
          },
        ],
      },
      forgotPassModalDialogVisible: false,
      secretAnswer: "",
      secretQuestion: "喜欢爸爸还是喜欢妈妈",
      isSecretPass: false,
      password: "",
    };
  },
  methods: {
    login() {
      const { role, account, password } = this.form;
      login(role, account, password).then((res) => {
        const { code } = res.data;
        if (code == 200) {
          // TODO:后台更改后要更改为：res.data.data
          localStorage.setItem("userInfo", JSON.stringify(res.data.data));
          this.$router.replace("/");
          this.$message({
            message: "登录成功",
            type: "success",
          });
          //
        } else {
          this.$message.error("登录失败");
        }
      });
    },
    register() {
      this.$router.push("/register");
    },
    handleForgotPass() {
      const { account, role } = this.form;
      if (account && role) {
        this.forgotPassModalDialogVisible = true;
      } else {
        alert("请先填好账号和身份！");
      }
    },
    handleClick() {
      const { role } = this.form;
      const who_id = `${role}_id`;
      const uid = this.form[who_id];
      if (!this.isSecretPass) {
        // forgotPassModalDialogVisible = false
        // 上传

        // submitSecretAnswer(role, uid, this.secretAnswer).then((res) => {
        //   if (res.data.code == 200) {
        //     // alterPasswordBySecretQuestion(this.password);
        //     this.isSecretPass = true;
        //   }
        // });
        this.isSecretPass = true;
      } else {
        console.log(this.password);
        alterPasswordBySecretQuestion(role, uid, this.password);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 40%;
  height: 300px;
  // margin-top: ;
  position: absolute;
  left: 30%;
  top: calc(50% - 150px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  // text-align: center;
  .login-title {
    text-align: center;
  }
  .login-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    // align-items: center;
  }
  .btns {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .el-form-item {
    display: block;
  }
}
.forgot-pass {
  cursor: pointer;
  font-weight: 500;
  &:hover {
    color: #66b1ff;
  }
}
</style>